<template>
  <el-backtop :bottom="100" style="width: 54px;height: 54px;">
    <div
        style="
        padding-top: 18px;
        height: 75%;
        width: 100%;
        background-color: #00c792;
        box-shadow: var(--el-box-shadow-lighter);
        text-align: center;
      "
    >
      <img src="../../assets/向上箭头.png" style="width: 30px;height: 25px;">
    </div>
  </el-backtop>
  <div class="patient_main">
    <div class="main" style="padding-bottom: 0;">
      <div class="container">
        <ul>
          <li v-for="(item, key) in pay.order_list" :key="key">
            <el-card class="content" @click="toAnswer(item, key)">
              <div>
                <span class="order-number">订单号：{{ item.order_info[key].order_number}}</span>
                <span class="date">{{ item.order_info[key].pay_time}}</span>
              </div>
              <el-avatar class="circle" :size="80" :src="settings.host + item.doctor_info[0].avatar.slice(1)"/>
              <div class="info">
                <div>{{ item.doctor_info[0].name}} </div>
                <div>{{ item.doctor_info[0].department_name}} {{ item.doctor_info[0].hospital_name}} {{ item.doctor_info[0].hospital_level}}</div>
              </div>
              <div class="patient-info">
                <div>患者信息：<span>{{ item.patients_info[0].name }}</span> <span>{{ item.patients_info[0].age }}</span> <span>{{ item.patients_info[0].sex }}</span></div>
              </div>
              <div class="symptoms">
                <p class="answer_content">{{ item.answer_info[0].user_content}}</p>
              </div>
            </el-card>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, watch, onMounted} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import { useRouter, useRoute} from "vue-router";
import pay from "../../api/pay.js";
import settings from "../../settings.js";
import answer from "../../api/answer.js";
const router = useRouter()
const route = useRoute()


onMounted(()=>{
  let token = sessionStorage.access_token || localStorage.access_token;
  pay.get_order(token)
})

const toAnswer=(info, id)=>{
  // answer.answer_info = pay.order_list[id]
  const answer_id = info.answer_info[0].id
  const doctor_id = info.doctor_info[0].id
  const order_id = info.order_info[id].id
  router.push({ path: '/answer', query: { answer_id: answer_id, doctor_id: doctor_id, order_id: order_id} })
  // router.push(`/answer?info=${info}&id=${id}`)

}

</script>

<style scoped>
.patient_main {
  background-color: #f4f4f4;
  height: auto;
}
.main {
  width: 768px;
  /*min-height: 90%;*/
  height: 100%;
  margin: 0 auto;
  background-color: #f4f4f4;
}

.container{
  height: 100%;
  background-color: white;
}

.content{
  height: 200px;
  margin: 20px;
  padding: 20px;
  border-radius: 10px;
}

.order-number {
  font-size: 18px;
  font-weight: bold;
}
.date {
  float: right;
  font-size: 14px;
}
.circle {
  margin-top: 20px;
  width: 100px;
  height: 100px;
  float: left;
  margin-right: 30px;
}
.info {
  margin-top: 25px;
  overflow: hidden;
}
.info div {
  margin-bottom: 5px;
}
.info span {
  font-weight: bold;
}
.patient-info {
  margin-top: 10px;
}
.patient-info span {
  margin-right: 5px;
}
.symptoms {
  margin-top: 5px;
  margin-left: 20%;
  /*border: 1px solid #000;*/
  border-radius: 10px;
  /*background-color: rgba(128, 128, 128, 0.5);*/
  /*background-color: rgba(0, 0, 0, 0.1);*/
  /*background-color: rgba(0, 199, 146, 0.5); !* 颜色为#00c792，透明度为50% *!*/
  /*padding: 5px;*/
}
ul{
  list-style-type: none; /* 去掉默认的圆点 */
  padding: 0; /* 去掉默认的内边距 */
  text-align: justify; /* 两端对齐 */
}

.answer_content{
  font-size: 13px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  white-space: normal !important;
}


</style>